<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.11 课后作业07</title>
</head>

<body>

    <body>
        <div id="d1">初始内容1</div>
        <div class="d2">初始内容2</div>
        <ul id="list">
            <li>项目1</li>
        </ul>
        <p id="ref">参考位置</p>

        <script>
            // 获取元素
            const d1 = document.getElementById("d1");
            const d2s = document.getElementsByClassName("d2");
            const list = document.getElementById("list");
            const ref = document.getElementById("ref");

            // 修改内容
            d1.innerHTML = "<b>修改后内容</b>";
            d2s[0].style.color = "blue";

            // 创建元素
            const newLi = document.createElement("li");
            newLi.textContent = "新项目";
            list.appendChild(newLi);

            // 插入操作
            const newP = document.createElement("p");
            newP.textContent = "插入到前面";
            ref.before(newP);

            // 遍历元素
            console.log("子元素:", list.children);
            console.log("父元素:", list.parentElement);

            // 删除操作
            setTimeout(() => {
                newLi.remove();
                console.log("已删除新项目");
            }, 2000);
        </script>
    </body>
</body>

</html>